<template>
  <div id="multi-center-board">
    <div class="center-board-title">中小学教职工人员结构变动</div>
    <div id="multiEchart"></div>
  </div>
</template>

<script>
export default {
  name: 'echartsTest',

  data() {
    return {
      option: {
        color: ['#0092ff', '#eba954', '#21b6b9'],
        legend: {
          top: 10,
          left: 'center',
          textStyle: {
            color: '#97b8d8'
          },
          data: ['事业编制', '周转编制', '聘教控制数']
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        xAxis: [
          {
            gridIndex: 0,
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(151,184,216,0.5)',
                type: 'dashed'
              }
            },
            type: 'category',
            boundaryGap: false,
            data: ['2021年6月', '2021年9月', '2021年12月', '2022年3月', '2022年6月', '2022年9月']
          },
          {
            gridIndex: 1,
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(151,184,216,0.5)',
                type: 'dashed'
              }
            },
            type: 'category',
            boundaryGap: false,
            data: ['2021年6月', '2021年9月', '2021年12月', '2022年3月', '2022年6月', '2022年9月']
          },
          {
            gridIndex: 2,
            axisLine: {
              lineStyle: {
                color: '#97b8d8'
              }
            },
            axisLabel: {
              color: '#97b8d8',
              fontSize: 14
            },
            type: 'category',
            boundaryGap: false,
            data: ['2021年6月', '2021年9月', '2021年12月', '2022年3月', '2022年6月', '2022年9月']
          }
        ],
        yAxis: [
          {
            gridIndex: 0,
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            splitNumber: 1,
            name: '事业编制',
            nameLocation: 'center',
            nameTextStyle: {
              color: '#fff',
              fontSize: 14
            },
            nameRotate: 360
          },
          {
            gridIndex: 1,
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            splitNumber: 1,
            name: '周转编制',
            nameLocation: 'center',
            nameTextStyle: {
              color: '#fff',
              fontSize: 14
            },
            nameRotate: 360
          },
          {
            gridIndex: 2,
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            splitNumber: 1,
            name: '聘教控制数',
            nameLocation: 'center',
            nameTextStyle: {
              color: '#fff',
              fontSize: 14
            },
            nameRotate: 360
          }
        ],
        grid: [
          {
            top: '0%',
            left: '100',
            right: '4%',
            bottom: '0',
            height: '30%'
          },
          {
            top: '30%',
            left: '100',
            right: '4%',
            bottom: '0',
            height: '30%'
          },
          {
            top: '60%',
            left: '100',
            right: '4%',
            bottom: '10%',
            height: '30%'
          }
        ],
        series: [
          {
            type: 'line',
            data: [
              0, 41.1, 30.4, 65.1, 53.3, 53.3, 53.3, 41.1, 30.4, 65.1, 53.3, 0
            ],
            xAxisIndex: 0,
            yAxisIndex: 0,
            smooth: true,
            lineStyle: {
              color: '#21b6b9'
            },
            itemStyle: {
              normal: {
                color: '#21b6b9',
                borderColor: '#21b6b9'
              }
            }
          },
          {
            type: 'line',
            data: [12, 45, 15, 2, 56, 15, 12, 45, 15, 2, 56, 15],
            xAxisIndex: 1,
            yAxisIndex: 1,
            smooth: true,
            lineStyle: {
              color: '#eba954'
            },
            itemStyle: {
              normal: {
                color: '#eba954',
                borderColor: '#eba954'
              }
            }
          },
          {
            type: 'line',
            data: [
              0, 74.1, 67.2, 79.5, 46.4, 46.4, 46.4, 74.1, 67.2, 79.5, 46.4, 0
            ],
            xAxisIndex: 2,
            yAxisIndex: 2,
            smooth: true,
            lineStyle: {
              color: '#d74e67'
            },
            itemStyle: {
              normal: {
                color: '#d74e67',
                borderColor: '#d74e67'
              }
            }
          }
        ]
      }
    }
  },
  mounted() {
    this.initEchart()
  },
  methods: {
    initEchart() {
      var chartDom = document.getElementById('multiEchart')
      var myChart = this.$echarts.init(chartDom)
      myChart.setOption(this.option)
    }
  }
}
</script>

<style lang="scss">
#multi-center-board {
  width: calc(40% - 15px);
  height: 100%;
  box-sizing: border-box;
  background-color: rgba(1, 35, 102, 0.9);
  //background-color: #012366;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .center-board-title {
    font-weight: bold;
    height: 50px;
    border-bottom: #336699 1px solid;
    display: flex;
    align-items: center;
    font-size: 18px;
    justify-content: center;
  }
}
#multiEchart {
  width: 100%;
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
}
</style>
